<template>
    <div class="learn">
        <div class="main">
            <div class="main-left">
                <el-button class="left-back" type="warning" @click="router.push('/index')">回到主页</el-button>
                <div class="left-main">
                    <div class="left-title">
                        <img src="@/static/icons/memory.png" />
                        复习模式
                        <div style="display: flex; align-items: center">
                        <el-popover placement="right" :width="600" trigger="click">
                            <template #reference>
                                <el-button style="margin-right: 16px">批量管理</el-button>
                            </template>
                            <Manage></Manage>
                        </el-popover>
                    </div>
                    </div>
                    <div class="left-counter">
                        <div class="left-number" style="color:#EACD76">{{data.left}}</div>
                        <span>待复习</span>
                        <img src="@/static/icons/arrow.png" />
                        <div class="left-number" style="color:#80D1B9">{{data.needToReviseNum}}</div>
                        <span>记忆模糊</span>
                        <img src="@/static/icons/arrow.png" />
                        <div class="left-number" style="color:#23B26D">{{data.learned}}</div>
                        <span>当前已记住</span>
                    </div>
                    <div class="left-rate"></div>
                </div>
            </div>
            <div class="learn-word">
                <div class="word-card" >
                    <div class="card-progress">
                        <div :style="'width:'+1+'%'" />
                    </div>
                    <div class="word-en"><div/><span>{{data.ReviseList[index].english}}</span></div>
                    <div v-show="chineseShow" class="word-zh" :style="1?'':'opacity:0'">{{data.ReviseList[index].chinese}}</div>
                </div>
                <div class="word-choice">
                    <template :is="confirmState" v-if="!confirmState && !done">
                        <el-button class="button" type="success" @click="know">一眼丁真</el-button>
                        <el-button class="button" type="warning" @click="vague">他是一个一个一个</el-button>
                        <el-button class="button" type="danger" @click="dontKnow">不懂咩</el-button>
                    </template>

                    <template :is="confirmState" v-if="confirmState && !done">
                        <el-button class="button" type="success" @click="next">下一个</el-button>
                        <el-button class="button" type="warning" @click="wrong">看错了</el-button>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from "@/router";
import {useStore} from "@/stores";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import { ElMessageBox } from 'element-plus'

import Manage from "@/components/index/Manage.vue";
import {post} from "@/net";

const store = useStore()

let tag = ref(false)
// let manageTag = false;
const data = ref({
    //索引
    left:store.revise.needToRevise.length,
    learned:0,
    needToReviseNum:0,
    //数据
    ReviseList:store.revise.needToRevise,
})

let done = ref(false)
let confirmState = ref(false)


//初始化列表
let wordlist = []
let wordState = new Map()
let wordPos = new Map()
let stateIndex = [0, 10, 7, 6, 5, 4, 3]
let currentRevise = data.value.ReviseList;
//
let index = ref(0)
// let index = ref(0)
let currentWord = ref({
    english: data.value.ReviseList[index.value].english,
    chinese: data.value.ReviseList[index.value].chinese
})
//
for (let i = 0; i < data.value.left; i++) {
    //状态1为：待学习次数
    wordState.set(data.value.ReviseList[i].id, 1)
    wordlist.splice(i, 0, data.value.ReviseList[i].id)
    wordPos.set(data.value.ReviseList[i].id, i)
}

let chineseShow = ref(false)
index.value = wordPos.get(wordlist[0]);

//知道、模糊、不认识
const know = ()=>{

    switchChineseShow();
    switchConfirmState();

    let wordId = wordlist[0]
    let state = wordState.get(wordId)
    wordlist.shift()
    if (state !== 1) {
        state --
        wordState.set(wordId, state)
        let target = stateIndex[state]
        wordlist.splice(Math.min(target, wordlist.length), 0, wordId)
    }else {
        data.value.learned ++
        data.value.left --
        if (data.value.needToReviseNum > 0)
            data.value.needToReviseNum --
        //复习词汇
        currentRevise.push(wordId)
    }
}
const vague = ()=>{

    switchChineseShow();
    switchConfirmState();

    // 当前背的单词
    let wordId = wordlist[0]
    wordlist.shift()
    let state = 3
    // 设置当前的状态为3
    wordState.set(wordId, state)
    let target = stateIndex[state]
    wordlist.splice(Math.min(target, wordlist.length), 0, wordId)

    if (data.value.needToReviseNum < data.value.ReviseList.length){
        data.value.needToReviseNum ++;
    }
}
const dontKnow = ()=>{

    switchChineseShow();
    switchConfirmState();

    // 当前背的单词
    let wordId = wordlist[0]

    wordlist.shift()

    let state = 6
    // 设置当前的状态为3
    wordState.set(wordId, state)
    let target = stateIndex[state]
    wordlist.splice(Math.min(target, wordlist.length), 0, wordId)

    if (data.value.needToReviseNum < data.value.ReviseList.length){
        data.value.needToReviseNum ++;
    }

}
const switchConfirmState = ()=>{
    confirmState.value = !confirmState.value;
}
const switchChineseShow = ()=>{
    chineseShow.value = !chineseShow.value;
}
const next = ()=>{
    switchConfirmState()
    switchChineseShow()
    if (wordlist.length > 0){
        index.value = wordPos.get(wordlist[0]);
        currentWord.value.english = data.value.ReviseList[index.value].english
        currentWord.value.chinese = data.value.ReviseList[index.value].chinese
    }else{
        upload()
        ElMessage.success('复习结束奖励自己一把云顶吧')
        done.value = true
    }
}

const wrong = ()=>{
    dontKnow()
}
const upload = ()=>{
    post('/vocabulary/clearReviseList',{
        userId:store.auth.user.id,
    },(massage)=>{
        ElMessage.success(massage+'个单词复习成功!')
    })
}

</script>

<style scoped>
.learn {
  width: 100vw;
  height: 100vh;
  background: #F0F0F0;
}

.main {
  height: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}

.main-left {
  width: 220px;
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: 80px;
  bottom: 0;
  box-shadow: 4px 0 18px 0 rgba(0,0,0,.28);
}

.left-back {
  width: 100%;
  height: 55px;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #455358;
  font-weight: 600;
  cursor: pointer;
}

.left-back img {
  width: 16px;
  height: 16px;
  margin-right: 7px;
  margin-top: 2px;
}

.left-main {
  width: 100%;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
}

.left-title {
  display: flex;
  height: 50px;
  align-items: center;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: #455358;
  padding: 0 20px;
  box-sizing: border-box;
}

.left-title img {
  width: 28px;
  height: 28px;
  margin-right: 4px;
}

.left-counter {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
}

.left-number {
  color: #455358;
  font-weight: 700;
  font-size: 20px;
}

.left-counter span {
  color: #455358;
  font-size: 12px;
  font-weight: 600;
}

.left-counter img {
  width: 28px;
  height: 28px;
}

.left-rate {
  position: absolute;
  bottom: 0;
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #455358;
  font-size: 20px;
  font-weight: bolder;
}

.learn-word {
  position: absolute;
  left: 220px;
  right: 0;
  top: 80px;
  bottom: 0;
  padding: 30px;
  box-sizing: border-box;
}

.word-card {
  width: 100%;
  height: 75%;
  background: #FFFFFF;
  position: relative;
  cursor: pointer;
}

.card-progress {
  position: absolute;
  top: 0;
  width: 100%;
  height: 5px;
  background: rgb(128, 209, 185);
}

.card-progress div {
  height: 100%;
  background: #40BC96;
  transition: all 0.2s;
}

.word-en,
.word-zh {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  left: 0;
  color: #455358;
}

.word-zh {
  height: calc(64% - 100px);
  margin: 50px 0;
  font-size: 23px;
  line-height: 30px;
  padding: 0 18%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  font-family: "Microsoft YaHei" !important;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
  white-space: pre-line;
}

.word-en {
  font-size: 26px;
  height: 36%;
  font-family: TimesNewRoman !important;
}

.word-en div {
  width: 100%;
  height: 80%;
}

.word-en span {
  width: 100%;
  text-align: center;
  flex-shrink: 0;
}

.word-choice {
  width: 100%;
  height: 72px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 5px;
  box-sizing: border-box;
}

.button {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  transition: all 0.4s ease;
}

.new {
  width: 100%;
  border: solid 2px #3CCFCF;
  color: #455358;
}

.green {
  border: solid 2px #90c0ac;
  color: #90c0ac;
}

.yellow {
  border: solid 2px #e0a143;
  color: #e0a143;
}

.red {
  border: solid 2px #cd6c48;
  color: #cd6c48;
}

.button-num {
  width: 20px;
  height: 20px;
  position: absolute;
  left: -10px;
  top: -4px;
  background: #F0F0F0;
  padding: 3px 2px;
}

.button-num span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #c0cace;
  box-sizing: border-box;
  color: #c0cace;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
</style>
